<template>
  <div class="order_list">
    <div class="tal_class_searchBox">
      <form action="/">
        <van-search
          placeholder="请输入收货人、电话、商品名称或订单号搜索"
          background="#00CC66"
          v-model="searchValue"
          show-action
        >
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
      </form>
    </div>
    <van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
      <van-tab v-for="tab in tabsItem" :title="tab.name" :key="tab.status">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :offset="100"
          @load="loadMore"
        >
          <van-panel
            v-for="(el, i) in items"
            class="order_list--panel"
            :key="i"
            :title="el.ordersn"
            :status="getStatusText(el.status)"
          >
            <div>
              <van-card
                v-for="(goods, goodsI) in el.orderProducts"
                class="order_list--van-card"
                :key="goodsI"
                :title="goods.productName"
                :desc="goods.specTitle"
                :num="goods.total"
                :price="goods.marketprice.toFixed(2)"
                :thumb="goods.thumb | image"
              >
                <div slot="tags" class="van-card__desc">
                  <div v-if="goods.optionname">商品规格：{{goods.optionname}}</div>
                  <div class="goods_status">
                    {{getStatusText(goods.status)}}
                    <van-button
                      v-if="canCancelGoods(el, goods)"
                      class="cancel_btn"
                      size="mini"
                      type="warning"
                      plain
                      @click="cancelGoods(goods)"
                    >单品取消</van-button>
                  </div>
                </div>
              </van-card>
              <div class="order_list--sender">
                <div class="float-l">
                  <span>{{el.sname}}</span>
                  <span style="margin-left: 5px;">{{el.mobile}}</span>
                </div>
                <div>{{el.createTime | dateTimeFormat}}</div>
              </div>
            </div>
            <component
              slot="footer"
              :is="getStatusHandler(el.status)"
              @handle="actionHandle($event, i)"
            >
              <div class="float-l yuan">
                合计:
                <span style="color: #ff0053;">{{el.orderprice | yuan(false)}}</span>
              </div>
            </component>
          </van-panel>
        </van-list>

        <is-empty v-if="isEmpty">抱歉,没有找到符合条件的订单</is-empty>
      </van-tab>
    </van-tabs>
    <transition name="fade">
      <van-icon name="arrowupcircle" class="backTop red" @click.native="backTop" v-show="showArrow"></van-icon>
    </transition>
  </div>
</template>

<script>
import { ORDER_LIST, CANCEL_ORDER, CANCEL_GOODS } from "@/api/order";

import { Tab, Tabs, Panel, Card, Search } from "vant";
import IsEmpty from "@/vue/components/is-empty/";
import status0 from "./handle-status-10";
import status1 from "./handle-status-20";
import status25 from "./handle-status-25";
import status2 from "./handle-status-30";
import status3 from "./handle-status-40";
import status4 from "./handle-status-50";
import status5 from "./handle-status-60";
import status6 from "./handle-status-70";

import loadMore from "@/vue/mixin/list-load-more";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import orderAction from "@/vue/mixin/order-action";
import wxConfig from "@/vue/mixin/wx-config";

const STATUS_TEXT = {
  "-1": "已取消",
  0: "待付款",
  1: "待发货",
  2: "已发货",
  25: "部分发货",
  3: "已收货",
  4: "待退款",
  5: "售后中",
  6: "已完成"
};
const STATUS_HANDLER = {
  "-1": status6,
  0: status0,
  1: status1,
  2: status2,
  3: status3,
  4: status4,
  5: status5,
  // 添加
  6: status4
};

export default {
  name: "order-list",
  mixins: [loadMore, scrollFixed, orderAction, wxConfig],

  props: {
    active: {
      type: [String, Number],
      default: 0
    }
  },

  data() {
    const activeIndex = this.active;
    const user = this.$util.getLocalStorage("user");
    return {
      searchValue: "",
      activeIndex,
      items: [],
      tabsItem: [
        {
          name: "全部"
        },
        {
          name: "待付款",
          status: 0
        },
        {
          name: "待发货",
          status: 1
        },
        {
          name: "已发货",
          status: 2
        },
        //5.13增加已收货，矫正已完成
        {
          name: "已收货",
          status: 3
        },
        {
          name: "已完成",
          status: 6
        }
      ],
      user
    };
  },
  watch: {
    $route: "resetInit"
  },

  created() {
    this.resetInit();
  },

  methods: {
    onSearch() {
      this.resetInit();
    },
    initData() {
      const i = this.activeIndex;
      const status = this.tabsItem[i].status;
      return this.$reqGet(
        ORDER_LIST,
        {
          limit: this.pages.perPage,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          mid: this.user.id,
          status: status,
          queryItem: this.searchValue
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const { rows, total } = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },
    toPay(order) {
      let vm = this;
      this.isWxApp().then(app => {
        if (app) {
          vm.$router.replace({
            name: "payment",
            params: {
              payId: order.id
            }
          });
        } else {
          location.href = vm.getUri() + "order/payment/" + order.id;
        }
      });
    },
    handleTabClick(index) {
      // console.log("索引值：" + index);
      this.activeIndex = index;
      this.resetInit();
    },
    getStatusText(status) {
      return STATUS_TEXT[status] || "";
    },
    getStatusHandler(status) {
      return STATUS_HANDLER[status];
    },
    toOrderDetail(order) {
      this.$router.push({
        name: "payment",
        params: {
          payId: order.id
        }
      });
    },
    actionHandle(handle, i) {
      this[handle] && this[handle](this.items[i]);
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [Search.name]: Search,
    [IsEmpty.name]: IsEmpty,
    status0,
    status1,
    status25,
    status2,
    status3,
    status4,
    status5,
    status6
  }
};
</script>

<style lang="scss" scoped>
.order_list {
  &--footer_btn {
    text-align: right;
    line-height: 30px;
  }
  &--panel {
    margin-bottom: 10px;
  }

  &--van-card {
    background-color: #fafafa;
  }

  &--sender {
    text-align: right;
    padding: 10px 15px;
  }
}

.yuan {
  font-size: 16px;

  ::before {
    content: "¥";
    margin-right: 3px;
    font-size: 8px;
  }
}
.goods_status {
  color: $red;
  position: absolute;
  bottom: 1px;
}
.tal_class_searchBox {
  width: 100%;
  position: relative;
}
</style>
